<%@ page import="ar.com.photo_admin.domain.Event"%>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="layout" content="main">
	<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
	<link rel="stylesheet"
		href="${resource(dir:'css',file:'jquery.fileupload-ui.css')}"
		type="text/css" />	

	<!-- CSS to style the autocomplete feature -->
	<link rel="stylesheet"
		href="${resource(dir:'css',file:'jquery-ui-1.9.2.custom.css')}"
		type="text/css" />
	
	<calendar:resources lang="en" theme="aqua"/>
</head>
<body>
	<div class="page-header">
		<h1>
			<g:if test="${create}">
				<g:message code="event.newEvent" />
			</g:if>
			<g:if test="${edit}">
				<g:message code="event.editEvent" />
			</g:if>			 
		</h1>
	</div>

	<g:if test="${flash.message}">
		<div class="alert alert-success">  
		  <a class="close" data-dismiss="alert">×</a>  
		  <div class="message">${flash.message}</div>  
		</div>				
	</g:if>
			
	<g:hasErrors bean="${eventInstance}">
		<g:eachError bean="${eventInstance}" var="error">
			<div id="signinErrors" class="alert alert-error">
				<a class="close" data-dismiss="alert">×</a>
				<g:message error="${error}" />
			</div>
		</g:eachError>
	</g:hasErrors>
		
	<g:form name="eventForm" action="save">				
		<g:hiddenField name="id" value="${eventInstance?.id}" />
		<g:hiddenField name="eventNumber" value="${eventNumber}"/>
		<g:hiddenField id="coverId" name="coverId" value="${coverPhotoId}"/>

		<div id="eventHeader" class="row">
			<div id="thumbnailContainer" class="span4">
				<img id="coverPhotoImage"
					src="${resource(dir:'images', file: 'defaultImage.jpg')}"
					class="coverPhoto thumbnail" name="0"></img>
			</div>

			<div class="span8">
				<div
					class="control-group ${hasErrors(bean: eventInstance, field: 'name', 'error')}">
					<label class="control-label" for="name"><g:message
							code="name" />
							<span class="required-indicator">*</span></label>
					<div class="controls">
						<g:field id="name" class="input-large" type="text" name="name"
							value="${eventInstance?.name}" maxlength="25"
							placeholder="${message(code: 'event.name')}" required="" />
					</div>
				</div>

				<div class="control-group ${hasErrors(bean: eventInstance, field: 'description', 'error')}">
					<label class="control-label" for="description"><g:message
							code="description" /></label>
					<div class="controls">
						<g:textArea rows="3" maxlength="200"
							name="description" value="${eventInstance?.description}"
							placeholder="${message(code: 'event.description')}"></g:textArea>
					</div>				
				</div>
				<g:if test="${create}">
					<div class="control-group">		
						<div class="controls">
							<label>	
								<g:checkBox style="margin: 0;" name="albumAllPhotosCreated" value="true"/>				
								<g:message code="event.albumAllPhotosCreated"  />
							</label>										
						</div>	
					</div>
				</g:if>
			</div>
		</div>
		
		<div class="separator"></div>
		´
		<div class="row">
			<div class="form-horizontal span6">
				<div
					class="control-group ${hasErrors(bean: eventInstance, field: 'eventDate', 'error')}">
					<label class="control-label" for="eventDate"><g:message
							code="event.date" /></label>
					<div class="controls">
						<calendar:datePicker id="eventDate" dateFormat="%d/%m/%Y"
							name="eventDate" defaultValue="${eventInstance?.eventDate}"
							years="2000,2050" />
					</div>
				</div>
			</div>
			<div class="form-horizontal span6">
				<div
					class="control-group ${hasErrors(bean: eventInstance, field: 'client', 'error')}">
					<label class="control-label" for="client"><g:message
							code="client" />						
					</label>
					<div class="controls">													
						<g:textField id="txt_client" name="clientName" value="${clientName}"/>					
					</div>
				</div>
			</div>
		</div>
	</g:form>
		
		
	<!-- The file upload form used as target for the file upload widget -->
	<form id="fileupload" action="uploadAction" method="post"
		enctype="multipart/form-data" >
				
		<input id="uploadFiles" class="hidden" type="file" name="files[]" multiple>
			
		<div id="buttons" class="overflow">
			<div class="btn-group fileupload-buttonbar inline fl">
				<a class="btn btn-success" onclick="$('input[id=uploadFiles]').click();"> <i
					class="icon-plus icon-white"></i> <span><g:message code="event.addPhotos"/></span> 
				</a>
				
				<button id="btn_save" form="eventForm" class="btn btn-success"><g:message code="save"/></button>
				<button id="btn_cancel" class="btn btn-success" onclick="return false;"><g:message code="cancel"/></button>
					
				<button type="submit" class="btn btn-primary start">
					<i class="icon-upload icon-white"></i><span><g:message code="upload"/></span>
				</button>
				
			</div>
					
			<div class="fileupload-buttonbar inline fr">
				<button id="btn_cover" class="btn btn-success" onclick="return false;"><g:message code="coverPhoto.select"/></button>
				<button type="button" id="deleteUploadedPhotos" class="btn btn-danger delete">
					<i class="icon-trash icon-white"></i> <span><g:message code="event.photos.deleteSelected"/></span>
				</button>
			</div>			
		</div>
			
		<div class="separator separatorUsingBorder"></div>

		<h2>
			<g:message code="event.photos" />
		</h2>
		
		<div class="row fileupload-buttonbar hidden">
			<div class="span5 fileupload-progress fade">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <!-- The extended global progress information -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        
    	<div id="noPhotosAvailable" class="alert alert-warning">  
			<a class="close" data-dismiss="alert">×</a>  
			<div class="message"><g:message code="event.no.available.photos"/></div>  
		</div>
			
		<div id="eventPhotosGridContainer" class="eventPhotosContainer row"> 
			<div id="upload_gallery">
			    <div class="row"  id="allPhotosContainer">
				</div>
			</div>
		</div>
			
		<input type="hidden" name="eventNumber" value="${eventNumber}">
		<div class="separator"></div>

		<table class="table table-striped">
			<tbody class="files" data-toggle="modal-gallery"
				data-target="#modal-gallery"></tbody>
		</table>
	</form>			

	<!-- The template to display files available for upload -->
	<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}	
    <tr class="template-upload fade">
		<g:isPreviewEnabled>
        	<td class="preview"><span class="fade"></span></td>
		</g:isPreviewEnabled>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>Subir</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
  <!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% 	for (var i=0, file; file=o.files[i]; i++) { 			 	
		if(!file.error){
			this.photosController.addPhoto(file);
			// Se llama al fw que hace que con on hover se visualice la imagen
			imagePreview();
		} else { 				%}
		<tr class="template-download fade">
            	<td class="name"><span>{%=file.name%}</span></td>
            	<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            	<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
				<td class="delete">
            	<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                	<i class="icon-trash icon-white"></i>
                	<span>{%=locale.fileupload.destroy%}</span>
            	</button>            
        	</td>
		</tr>
{%  	}	
	} %}
</script>

	<g:javascript src="vendor/jquery.ui.widget.js" />
	
	<g:javascript src="jquery-ui.autocomplete.js" />

	<!-- The Templates plugin is included to render the upload/download listings -->	
	<g:javascript src="tmpl.min.js" />	

	<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
	<g:javascript src="load-image.min.js" />	
	
	<!-- The Canvas to Blob plugin is included for image resizing functionality -->	
	<g:javascript src="canvas-to-blob.min.js" />
	
	<!-- Bootstrap Image Gallery styles -->
	<link rel="stylesheet" href="${resource(dir: 'css', file: 'bootstrap-image-gallery.min.css')}"
		type="text/css" />

	<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
	<g:javascript src="jquery.iframe-transport.js" />

	<!-- The basic File Upload plugin -->
	<g:javascript src="jquery.fileupload.js" />

	<!-- The File Upload image processing plugin -->
	<g:javascript src="jquery.fileupload-ip.js" />

	<!-- The File Upload user interface plugin -->
	<g:javascript src="jquery.fileupload-ui.js" />

	<!-- The localization script -->
	<g:javascript src="locale.js" />

	<!-- The main application script -->
	<g:javascript src="main.js" />
	
	<g:javascript src="imagePreview.js" />	
	
	<g:javascript src="model/Photo.js" />
	
	<g:javascript src="model/EventPhotosCollection.js" />
	
	<g:render template="eventCreateController" />	
	
	<script type="text/javascript">
       
	jQuery(document).ready(function(){

		photosController = new UploadPhotosController();		
		$('#txt_client').autocomplete({        	
        	source: "${createLink(controller: 'user', action: 'autocompleteUser')}"          
        });

		//Cuando carga la pagina, carga todas las imagenes ya existentes en el evento.
		jQuery.each(${uploaded_files}, function()  {									
			photosController.addPhoto(this);							
		});

		var coverPhotoId = "${coverPhotoId}";
		photosController.setCoverByPhotoId(coverPhotoId);
				
		jQuery('#deleteUploadedPhotos').click(function () {
			var postingUrl = "${createLink(controller: 'event', action: 'deleteSelectedPhotosTemporally')}";
			var eventNumber = "${event_number}";
			photosController.deleteSelectedPhotos(postingUrl,eventNumber);												
	    });

	    jQuery('#btn_cover').click(function () {	    	
	    	photosController.makeCoverPhoto();

		});
		
		jQuery("#btn_cancel").click(function(e){						
			var postingUrl = "${createLink(controller: 'event', action: 'cancel')}";
			var successUrl = "${createLink(controller:'event',action:'list')}";
			var eventNumber = "${eventNumber}";			
			var eventId = "${eventInstance?.id}";
			photosController.cancelChanges(postingUrl,successUrl,eventNumber,eventId);
		});
	    
		// Se llama al fw que hace que con on hover se visualice la imagen
		imagePreview();

   	});
    </script>	
</body>
</html>

